<template>
  <div class="tile-show-wrapper"
    v-on:click="clickHandler"
    v-on:mousedown="mousedownHandler"
    v-on:mouseenter="mouseenterHandler"
    v-on:mouseup="mouseupHandler">
    
    <!-- 监听键盘事件的元素 -->
    <div class="tile-show-key-event" contenteditable
      style="width: 0; height: 0;"
      v-on:keydown="keydownHandler"
      v-on:keydown.ctrl.67="copyHandler"
      v-on:keydown.ctrl.86="pasteHandler"></div>
    
    <!-- 最底层显示图片文件 -->
    <!-- 当下面的自定义插槽没有内容时，按照src显示单张图片 -->
    <div class="tile-show-layer" style="z-index: 10;">
      <img class="tile-show-image" v-if="!$slots.images && src" v-bind:src="imgSrc" v-bind:style="imageExtraStyle" />
      <!-- 此插槽用于自定义显示图片 -->
      <slot name="images"></slot>      
    </div>

    
    <!-- 第二层用于显示固定边框 -->
    <div class="tile-show-layer" style="z-index: 11;">
      <div class="tile-show-border" v-bind:class="borderSide"></div>
      <div class="tile-show-border" v-bind:class="borderFloor"></div>
    </div>
    
    <!-- 第三、四层用于边框特效 -->
    <div class="tile-show-layer tile-show-border-hover" style="z-index: 12;" v-if="hoverBorderEnabled"></div>
    <div class="tile-show-layer tile-show-border-selected" style="z-index: 13;" v-bind:style="selectedStyle"></div>
    
    <!-- 第五层用于快捷修改属性 -->
    <div class="tile-show-layer tile-show-props" style="z-index: 14;">
      <slot name="props"></slot>
    </div>
    
    <!-- 第六层用于覆盖层 -->
    <div class="tile-show-layer tile-show-cover" style="z-index: 15;" v-if="isCoverEnabled">
      <div class="tile-show-cover-wrapper">
        <div class="tile-show-cover-setting" v-if="onSelect" v-on:click="onSelect(index)"><Icon v-bind:size="coverIconSize" type="ios-checkmark" /></div>
        <div class="tile-show-cover-setting" v-if="onDelete" v-on:click="onDelete(index)"><Icon v-bind:size="coverIconSize" type="ios-trash" /></div>
        <div class="tile-show-cover-setting" v-if="onExchange" v-on:click="onExchange(index)"><Icon v-bind:size="coverIconSize" type="md-swap" /></div>
        <Tooltip v-if="seeEnabled" max-width="1000" class="tile-show-cover-setting" placement="bottom-start">
          <Icon v-bind:size="coverIconSize" type="ios-eye" />
          <div slot="content">
            <div style="text-align: center;">{{ seeDetail }}</div>
          </div>
        </Tooltip>
      </div>
    </div>
  </div>
</template>

<script src="./tileShow.js"></script>

<style lang="stylus">
@import './tileShow.styl'
</style>